<template>
  <div class="page">
    <div class="header">
      <div class="header-title">details</div>
      <div class="close-box" @click="goBack">
        <img
          class="close-img"
          src="../../assets/images//home/close.png"
          alt=""
        />
      </div>
    </div>

    <div class="swiper-box">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="big-swiper">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in detailImgList"
                    :key="index"
                  >
                    <div class="swiper-img-box">
                      <img :src="item.image" alt="" />
                    </div>
                  </div>
                </div>
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="small-swiper">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in detailImgList"
                    :key="index"
                  >
                    <img :src="item.image" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="line"></div>
    <v-touch
      @swipeleft="onSwipeLeft()"
      @swiperight="onSwipeRight()"
      :swipe-options="{ direction: 'horizontal' }"
      style="touch-action: pan-y !important"
    >
      <!-- 主页详情 -->
      <div class="detail-info" v-if="homepageDetail">
        <div class="detail-info-head">
          <div class="info-head-lf">
            <span class="info-head-name">{{
              advertisement_data.nickName
            }}</span>
            <span class="info-head-kli">{{ advertisement_data.miles }} </span>
          </div>
          <div class="info-head-rg">
            <div class="info-head-pho">
              {{ advertisement_data.phoneNumber }}
            </div>
            <img
              @click="showContactPopup"
              class="phone-img"
              src="../../assets/images/home/phone.png"
              alt=""
            />
          </div>
        </div>
        <div class="detail-info-content">
          <div class="info-content-item">
            <div class="info-content-item-lf">Race</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.race }}
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Age</div>
            <div class="info-content-item-rg">{{ advertisement_data.age }}</div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Occupation</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.occupation }}
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Height</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.height }}
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Hair color</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.type }}
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Available</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.available }}
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">location</div>
            <div class="info-content-item-rg">
              {{ advertisement_data.location }}
            </div>
          </div>
        </div>
        <div class="text-box">
          <div class="text-box-header">Paragraph heading</div>
          <div class="text-box-p">
            Modern Technologies We're all enjoying the conveniencesand happiness
            brought by modern technologies. We usetelephones and mobile phones
            to ca... Modern Technologies We're all enjoying the conveniencesand
            happiness brought by modern technologies. We usetelephones and
            mobile phones to ca...
          </div>
        </div>
      </div>
      <!-- 商铺详情 -->
      <div class="store-info" v-if="storeDetail">
        <div class="store-info-item">
          <div class="store-info-item-lf">Store Name：</div>
          <div class="store-info-item-rg">
            {{ advertisement_data.shopname }}
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Place：</div>
          <div class="store-info-item-rg">{{ advertisement_data.place }}</div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">phone number：</div>
          <div class="store-info-item-rg">
            <span class="phone-num">{{ advertisement_data.phoneNumber }}</span>
            <img
              @click="showContactPopup"
              class="phone-img"
              src="../../assets/images/home/phone.png"
              alt=""
            />
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Table Shower：</div>
          <div class="store-info-item-rg" v-if="advertisement_data.tableShower">
            yes
          </div>
          <div
            class="store-info-item-rg"
            v-if="!advertisement_data.tableShower"
          >
            no
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Sauna：</div>
          <div class="store-info-item-rg" v-if="advertisement_data.sauna">
            yes
          </div>
          <div class="store-info-item-rg" v-if="!advertisement_data.sauna">
            no
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Jacuzzi：</div>
          <div class="store-info-item-rg" v-if="advertisement_data.jacuzzi">
            yes
          </div>
          <div class="store-info-item-rg" v-if="!advertisement_data.jacuzzi">
            no
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Accept credit card：</div>
          <div
            class="store-info-item-rg"
            v-if="advertisement_data.acceptCreditCard"
          >
            yes
          </div>
          <div
            class="store-info-item-rg"
            v-if="!advertisement_data.acceptCreditCard"
          >
            no
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Masseur</div>
          <div class="store-info-item-rg" v-if="advertisement_data.masseur">
            yes
          </div>
          <div class="store-info-item-rg" v-if="!advertisement_data.masseur">
            no
          </div>
        </div>
        <div class="store-info-item">
          <div class="store-info-item-lf">Payment method:</div>
          <div class="store-info-item-rg">{{ advertisement_data.payment }}</div>
        </div>
        <div class="time-item">
          <div class="time-item-lf">Rate for 30 miuntes</div>
          <div class="time-item-rg">
            &nbsp;&nbsp;{{ advertisement_data.ratefor30 }}
          </div>
        </div>
        <div class="time-item">
          <div class="time-item-lf">Rate for 45 miuntes</div>
          <div class="time-item-rg">
            &nbsp;&nbsp;{{ advertisement_data.ratefor45 }}
          </div>
        </div>
        <div class="time-item">
          <div class="time-item-lf">Rate for 60 miuntes</div>
          <div class="time-item-rg">
            &nbsp;&nbsp;{{ advertisement_data.ratefor60 }}
          </div>
        </div>
        <div class="hour-box">
          <div class="hour-box-lf">Hours:</div>
          <div class="hour-box-rg">
            <div class="hour-box-rg-item">
              <div class="time">Monday</div>
              <div class="time-box1">AM：{{ advertisement_data.mondayAm }}</div>
              <div class="time-box2">PM：{{ advertisement_data.mondayPm }}</div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Tuesday</div>
              <div class="time-box1">
                AM：{{ advertisement_data.tuesdayAm }}
              </div>
              <div class="time-box2">
                PM：{{ advertisement_data.tuesdayPm }}
              </div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Wednesday</div>
              <div class="time-box1">
                AM：{{ advertisement_data.wednesdayAm }}
              </div>
              <div class="time-box2">
                PM：{{ advertisement_data.wednesdayPm }}
              </div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Thursday</div>
              <div class="time-box1">
                AM：{{ advertisement_data.thursdayAm }}
              </div>
              <div class="time-box2">
                PM：{{ advertisement_data.thursdayPm }}
              </div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Friday</div>
              <div class="time-box1">AM：{{ advertisement_data.fridayAm }}</div>
              <div class="time-box2">PM：{{ advertisement_data.fridayPm }}</div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Saturday</div>
              <div class="time-box1">
                AM：{{ advertisement_data.saturdayAm }}
              </div>
              <div class="time-box2">
                PM：{{ advertisement_data.saturdayPm }}
              </div>
              <div></div>
            </div>
            <div class="hour-box-rg-item">
              <div class="time">Sunday</div>
              <div class="time-box1">AM：{{ advertisement_data.sundayAm }}</div>
              <div class="time-box2">PM：{{ advertisement_data.sundayPm }}</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </v-touch>
    <!-- 电话弹窗 -->
    <van-popup v-model="showContact">
      <div class="popup-box">
        <div class="popup-head">phone number</div>
        <img
          @click="showContact = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">{{ advertisement_data.phoneNumber }}</div>
        <div
          class="confirm-btn"
          @click="copyPhoneNumber(advertisement_data.phoneNumber)"
        >
          copy
        </div>
      </div>
    </van-popup>
    <!-- 消息弹窗 -->
    <div class="msg-box" v-if="showMsg">
      <img
        class="msg-img"
        @click="showMsgBox = !showMsgBox"
        src="../../assets/images/home/msg.png"
        alt=""
      />
      <div class="msg-pop" v-if="showMsgBox">
        <div class="msg-contentBox">
          <div class="contentBox-header">
            Tony
            <img
              @click="showMsgBox = false"
              class="close-icon"
              src="../../assets/images/home/close-bl.png"
              alt=""
            />
          </div>
          <div class="msg-body">
            <div>
              <img
                class="avatar-img"
                src="../../assets/images/personal/avatar.png"
                alt=""
              />
            </div>
            <div class="msg-text">
              {{ remark }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiGetAllList_detail,
  apiGetRemark,
  apiAllList,
} from '../../request/api'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'detail',
  data() {
    return {
      detailImgList: [
        { image: require('../../assets/images/home/detail/detail-img1.png') },
        { image: require('../../assets/images/home/detail/detail-img2.png') },
        { image: require('../../assets/images/home/detail/detail-img3.png') },
        { image: require('../../assets/images/home/detail/detail-img4.png') },
        { image: require('../../assets/images/home/detail/detail-img1.png') },
        { image: require('../../assets/images/home/detail/detail-img2.png') },
        { image: require('../../assets/images/home/detail/detail-img3.png') },
        { image: require('../../assets/images/home/detail/detail-img4.png') },
      ],
      showDetailImgList: false,
      showContact: false,
      showMsg: false,
      showMsgBox: true,
      homepageDetail: true,
      storeDetail: false,
      //主页广告id
      advertisementId: null,
      // 主页广告详情数据
      advertisement_data: {},
      // 弹窗消息
      remark: '',
      allList: [],
      advertisementIds: [],
      currentIndex: null,
      herf: '',
    }
  },
  created() {
    // 控制消息弹窗
    setTimeout(() => {
      this.showMsg = true
    }, 3000)
    // 获取主页给来的路由参数
    console.log('主页给来的路由参数', this.$route.query)
    let category = this.$route.query.category
    let advertisementId = this.$route.query.advertisementId // 实际
    this.advertisementId = Number(advertisementId)
    console.log('this.advertisementId' + advertisementId)
    // let advertisementId = 1;
    if (category == '5' || category == '8') {
      this.homepageDetail = false
      this.storeDetail = true
    }
    if (advertisementId) {
      this.GET_apiGetAllList_detail(advertisementId)
    }
    // 消息提示获取接口
    apiGetRemark({}).then((res) => {
      if (res.code == 200) {
        this.remark = res.data.remark
      }
    })

    apiAllList({
      pageNum: 0,
      pageSize: 10000,
    }).then((res) => {
      if (res.code == 200) {
        this.allList = res.rows
        this.allList.forEach((ad) => {
          this.advertisementIds.push(ad.advertisementId)
        })
        console.log('this.advertisementIds.....' + this.advertisementIds)
      }
    })
  },
  mounted() {
    const bigSwiper = new Swiper('.big-swiper .swiper-container', {
      pagination: {
        el: '.big-swiper .swiper-pagination',
        clickable: true,
      },
      thumbs: {
        swiper: {
          el: '.small-swiper .swiper-container',
          slidesPerView: 4,
          spaceBetween: 10,
          breakpoints: {
            640: {
              slidesPerView: 4,
              spaceBetween: 10,
            },
            768: {
              slidesPerView: 5,
              spaceBetween: 20,
            },
          },
        },
      },
    })
    this.$data.bigSwiper = bigSwiper
  },
  methods: {
    goBack() {
      // this.$router.go(-1)

      window.open('http://app.abcd69.com/', '_self')
    },
    showContactPopup() {
      this.showContact = true
    },
    // 获取主页广告详情方法
    GET_apiGetAllList_detail(advertisementId) {
      apiGetAllList_detail(advertisementId).then((res) => {
        if (res.code == 200) {
          console.log('获取主页广告详情', res.data)
          let data = res.data
          this.advertisement_data = data
          let detailImgList = []
          detailImgList.push({ image: data.images })
          detailImgList.push({ image: data.imagesOne })
          detailImgList.push({ image: data.imagesTwo })
          detailImgList.push({ image: data.imagesThree })
          detailImgList.push({ image: data.imagesFour })
          detailImgList.push({ image: data.imagesFive })
          detailImgList.push({ image: data.imagesSix })
          detailImgList.push({ image: data.imagesSeven })
          detailImgList.push({ image: data.imagesEight })
          detailImgList.push({ image: data.imagesNine })
          detailImgList.forEach((element, index) => {
            if (element.image) {
            } else {
              delete detailImgList[index]
            }
          })
          for (let i = 0; i < detailImgList.length; i++) {
            if (
              detailImgList[i] == null ||
              detailImgList[i] == '' ||
              JSON.stringify(detailImgList[i]) == '{}'
            ) {
              detailImgList.splice(i, 1)
              i = i - 1
            }
          }
          this.detailImgList = detailImgList
          this.showDetailImgList = true
          console.log(this.detailImgList)
        }
      })
    },
    copyPhoneNumber(data) {
      this.$copyText(data).then(
        (e) => {
          this.$toast.success('复制成功')
        },
        (err) => {
          this.$toast.fail('复制失败')
        }
      )
    },

    onSwipeLeft() {
      console.log('左滑')
      const index = this.advertisementIds.indexOf(this.advertisementId)
      console.log(index)
      if (index < this.advertisementIds.length - 1) {
        this.currentIndex = index + 1
        this.advertisementId = this.advertisementIds[this.currentIndex]
        this.GET_apiGetAllList_detail(this.advertisementId)
      } else {
        console.log('没有更多的广告了')
      }
    },
    onSwipeRight() {
      console.log('右滑')
      const index = this.advertisementIds.indexOf(this.advertisementId)
      console.log(index)
      if (index > 0) {
        this.currentIndex = index - 1
        this.advertisementId = this.advertisementIds[this.currentIndex]
        this.GET_apiGetAllList_detail(this.advertisementId)
      } else {
        console.log('没有更多的广告了')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 100px;
  background: #273458;
  position: relative;
  .header-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
  }
  .close-box {
    position: absolute;
    height: 100px;
    right: 30px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .close-img {
    height: 40px;
    width: 40px;
  }
}
.swiper-box {
  padding: 24px;
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .big-swiper {
    width: 100%;
    height: 100%;
  }

  .big-swiper .swiper-container {
    width: 100%;
    height: 100%;
  }

  .big-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .small-swiper {
    width: 100%;
    height: 246px;
  }

  .small-swiper .swiper-slide {
    width: 178px;
    height: 246px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .small-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper-pagination {
    bottom: 20px;
  }

  .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .swiper-pagination-bullet-active {
    background-color: #fff;
  }
}
.line {
  height: 30px;
  background: #f3f3f3;
}
.detail-info {
  padding: 24px;
  .detail-info-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .info-head-name {
    font-size: 40px;
    font-weight: bold;
    color: #232f3e;
    margin-right: 6px;
  }
  .info-head-kli {
    font-size: 24px;
    font-weight: 500;
    color: #232f3e;
  }
  .info-head-rg {
    display: flex;
    align-items: center;
  }
  .info-head-pho {
    font-size: 24px;
    font-weight: 500;
    margin-right: 30px;
    color: #232f3e;
  }

  .detail-info-content {
    margin: 30px 0;
  }
  .info-content-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .info-content-item-lf {
    width: 200px;
    height: 70px;
    background: #273458;
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
  .info-content-item-rg {
    flex: 1;
    height: 70px;
    background: #f3f3f3;
    font-size: 24px;
    font-weight: 500;
    color: #232f3e;
    padding-left: 30px;
    display: flex;
    align-items: center;
  }
  .text-box {
    background: #f8f8f8;
    padding: 26px;
  }
  .text-box-header {
    font-size: 40px;
    font-weight: 500;
    color: #0e0e0e;
    margin-bottom: 36px;
  }
  .text-box-p {
    font-size: 26px;
    font-weight: 400;
    color: #000000;
  }
}
.phone-img {
  width: 54px;
  margin-right: 30px;
  height: 54px;
}
.store-info {
  padding: 50px 65px;
  font-size: 26px;
  font-weight: 400;
  color: #000000;
  .store-info-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d6d6d6;
    padding: 40px 0;
  }

  .store-info-item-lf {
    width: 50%;
  }
  .store-info-item-rg {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .phone-num {
    margin-right: 40px;
  }
  .store-info-item:last-child {
    border-bottom: none;
  }
  .time-item {
    display: flex;
    align-items: center;
    margin: 40px 0;
  }
  .time-item-lf {
    margin-right: 33px;
  }
  .time-item-rg {
    flex: 1;
    height: 70px;
    border: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
  }
  .hour-box {
    display: flex;
  }
  .hour-box-lf {
    height: 55px;
    margin-right: 40px;
    display: flex;
    align-items: center;
  }
  .hour-box-rg {
    flex: 1;
  }
  .hour-box-rg-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    box-sizing: border-box;
    height: 55px;
  }
  .time {
    margin-right: 30px;
    width: 130px;
  }
  .time-box1 {
    width: 165px;
    height: 55px;
    border: 1px solid #707070;
    margin-right: 12px;
    padding: 5px;
    box-sizing: border-box;
  }
  .time-box2 {
    width: 165px;
    height: 55px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #707070;
  }
}

// 弹窗样式
.popup-box {
  width: 567px;
  background: #ffffff;
  .popup-head {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    border-bottom: 1px solid #707070;
  }
  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }
  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    font-size: 40px;
    font-weight: bold;
    color: #232f3e;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}
.msg-box {
  position: fixed;
  right: 30px;
  bottom: 30%;
  z-index: 2;

  .msg-img {
    width: 81px;
    height: 81px;
    position: relative;
  }
  .msg-pop {
    position: absolute;
    top: -700px;
    right: 30px;
    width: 645px;
    height: 694px;
    border-radius: 40px;
    background-color: #f7f7f7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  .msg-contentBox {
    position: relative;
  }
  .contentBox-header {
    font-size: 29px;
    font-weight: bold;
    color: #000000;
    height: 94px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 40px 40px 0 0;
  }
  .close-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    right: 40px;
  }
  .msg-body {
    background: #f7f7f7;
    padding: 20px 20px;
  }
  .avatar-img {
    width: 92px;
    height: 92px;
  }
  .msg-text {
    background: #000;
    width: 446px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 20px 20px 20px 20px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 100px;
    top: 200px;
    padding: 24px;
  }
}
.swiper-img-box {
  height: 902px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
</style>
